<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


// 创建场景
const scene = new THREE.Scene();

const cubeTexture = new THREE.CubeTextureLoader().setPath('/').load(
  [
    '04.jpg', '01.jpg',
    '05.jpg', '02.jpg',
    '06.jpg', '03.jpg'
  ]
)
// 将
scene.background = cubeTexture;
// 创建雾 三个参数
// 第一个参数 雾的颜色
// 第二个参数 雾起始的距离
// 第三个参数 雾的结束的距离
scene.fog = new THREE.Fog(0xffffff, 20, 80);


// 创建一个相机
const camera = new THREE.PerspectiveCamera();
camera.position.z = 10;

camera.position.y = 6;


// 创建一个球体
const sphere = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({
  envMap: cubeTexture,
  // metalness: 1, // 设置金属度（0-1）  
  // roughness: 0.1, // 设置粗糙度（0-1）  
})

// 创建网格
const cube = new THREE.Mesh(sphere, material);
// 调整立方体位置 set接收三个参数 X轴Y轴Z轴的位置
cube.position.set(0, 3, 0);
// 添加到场景中
scene.add(cube);

// 添加网格地面
const gridHelper = new THREE.GridHelper(5, 5);
// 添加到场景中
scene.add(gridHelper);

onMounted(() => {
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();

  // 调整窗口大小
  renderer.setSize(500, 500);
  // 获取DOM节点,把渲染器添加到DOM节点中
  document.getElementById('container').appendChild(renderer.domElement)

  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  // 添加阻尼效果
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  // 进行渲染
  renderer.render(scene, camera);

  function animate() {
    //  告诉浏览器-你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
    // 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
    // 

    requestAnimationFrame(animate);

    controls.update();
    // 每一帧都重新进行渲染
    renderer.render(scene, camera);
  }
  animate()
})

</script>

<style>
    #container{
        width: 30vw;
        height: 30vw;
    }
</style>